﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.C1ComboBox.Animation" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1ComboBox"
	TagPrefix="wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
	<script id="scriptInit" type="text/javascript">
		function changeProperties() {
			var showingSpeed, hidingSpeed, expandingSpeed, collapsingSpeed;
			showingSpeed = parseNumberFromString($('#showingSpeed').val());
			hidingSpeed = parseNumberFromString($('#hidingSpeed').val());
			var showingAnimation = {
				effect: $('#showingEffectTypes').get(0).value,
				options: null,
				speed: showingSpeed
			};
			var hidingAnimation = {
				effect: $('#hidingEffectTypes').get(0).value,
				options: null,
				speed: hidingSpeed
			};

			if ($('#showingEffectTypes').get(0).value === "none") {
				showingAnimation = null;
			}

			if ($('#hidingEffectTypes').get(0).value === "none") {
				hidingAnimation = null;
			}

			var wij = $('#<%=C1ComboBox1.ClientID%>');
			wij.c1combobox('option', 'showingAnimation', showingAnimation);
			wij.c1combobox('option', 'hidingAnimation', hidingAnimation);
		}

		function parseNumberFromString(st) {
			var i = 1000;
			try {
				i = parseInt(st);
			}
			catch (e) {
				alert(e);
			}
			return i;
		}
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
		<style type ="text/css">
			.ui-effects-explode
			{
				z-index:99999;
			}
		</style>
	<wijmo:C1ComboBox ID="C1ComboBox1" runat="server" Width="160px">
	<ShowingAnimation Duration="1000">
	<Animated Effect="Scale" />
	</ShowingAnimation>
	<HidingAnimation Duration="1000">
	<Animated Effect="explode" />
	</HidingAnimation>
		<Items>
			<wijmo:C1ComboBoxItem Text="c++" Value="c++" />
			<wijmo:C1ComboBoxItem Text="java" Value="java" />
			<wijmo:C1ComboBoxItem Text="php" Value="php" />
			<wijmo:C1ComboBoxItem Text="coldfusion" Value="coldfusion" />
			<wijmo:C1ComboBoxItem Text="javascript" Value="javascript" />
			<wijmo:C1ComboBoxItem Text="asp" Value="asp" />
			<wijmo:C1ComboBoxItem Text="ruby" Value="ruby" />
			<wijmo:C1ComboBoxItem Text="python" Value="python" />
			<wijmo:C1ComboBoxItem Text="c" Value="c" />
			<wijmo:C1ComboBoxItem Text="scala" Value="scala" />
			<wijmo:C1ComboBoxItem Text="groovy" Value="groovy" />
			<wijmo:C1ComboBoxItem Text="haskell" Value="haskell" />
			<wijmo:C1ComboBoxItem Text="perl" Value="perl" />
		</Items>
	</wijmo:C1ComboBox>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>
	当显示或者隐藏下拉菜单的时候，<strong>C1ComboBox </strong>能够显示动画效果。
	</p>
	<p>下列选项被设置为相应的值，就可以显示或者隐藏动画效果： </p>
	<ul>
	<li><strong>ShowingAnimation </strong>- 下拉菜单可见时生效。</li>
	<li><strong>HidingAnimation </strong>- 下拉菜单隐藏时生效。</li>
	</ul>
    <p>
	<strong>ShowingAnimation</strong>和 <strong>HidingAnimation</strong>属性被设置的话，最终用户就能够看到动画效果。
	</p>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<div class="demo-options">
		<!-- Begin options markup -->
		<div class="option-row">
			<label for="showingSpeed">
				显示速度
			</label>
			<input id="showingSpeed" type="text" value="1000" onblur="changeProperties()" />
		</div>
		<div class="option-row">
			<label for="showingEffectTypes">
				显示效果
			</label>
			<select id="showingEffectTypes" name="effects" onchange="changeProperties()">
				<option value="none">无</option>
				<option value="blind">百叶窗</option>
				<option value="bounce">弹跳</option>
				<option value="clip">由中心展开</option>
				<option value="drop">由左侧隐入</option>
				<option value="explode">爆炸</option>
				<option value="fade" selected="selected">淡入</option>
				<option value="fold">折叠</option>
				<option value="highlight">高亮</option>
				<option value="puff">张开</option>
				<option value="pulsate">闪烁</option>
				<option value="scale">由右下角扩展</option>
				<option value="shake">摇动</option>
				<option value="size">由左上角扩展</option>
				<option value="slide">滑动</option>
			</select>
		</div>
		<div class="option-row">
			<label for="hidingSpeed">
				隐藏速度
			</label>
			<input id="hidingSpeed" type="text" value="1000" onblur="changeProperties()" />
		</div>
		<div class="option-row">
			<label for="hidingEffectTypes">
				隐藏效果
			</label>
			<select id="hidingEffectTypes" name="effects" onchange="changeProperties()">
				<option value="none">无</option>
				<option value="blind">百叶窗</option>
				<option value="bounce">弹跳</option>
				<option value="clip">向中心收回</option>
				<option value="drop">由左侧隐出</option>
				<option value="explode" selected="selected">爆炸</option>
				<option value="fade">淡出</option>
				<option value="fold">折叠</option>
				<option value="highlight">高亮</option>
				<option value="puff">张开</option>
				<option value="pulsate">闪烁</option>
				<option value="scale">向右下角收缩</option>
				<option value="shake">摇动</option>
				<option value="size">向左上角收缩</option>
				<option value="slide">滑动</option>
			</select>
		</div>
		<!-- End options markup -->
	</div>
</asp:Content>
